<template>
    <!-- 标题区域 -->
    <van-nav-bar title="首页" fixed />
    <div style="height: 45px;"></div>
    <!-- tabs切换 -->
    <van-tabs v-model:active="active">
        <van-tab title="精彩">
            <!-- 搜索框 -->
            <van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
            <!-- 轮播图 -->
            <swiper :images="images"></swiper>
            <!-- 秒杀 -->
            <div class="seckill" v-if="status">
                <h4>剩余时间{{ time }}秒</h4>
            </div>
            <!-- 导航  宫格渲染-->
            <van-grid :column-num="4">
                <van-grid-item v-for="item in cartitemData" :icon="item.image_src" :text="item.name" />
            </van-grid>
            <!-- 楼层  双层图片渲染-->
            <div v-for="item in floorData">
                <!-- 最外层 -->
                 <img style="width: 100%;" :src="item.floor_title.image_src" alt="">
                 <div v-for="items in item.product_list">
                    <img style="width: 120px;height: 120px;float: left;margin: 2px;" :src="items.image_src" alt="">
                 </div>
            </div>
        </van-tab>
        <van-tab title="猜你喜欢"></van-tab>
        <van-tab title="购物天堂">内容 3</van-tab>
        <van-tab title="植发">内容 4</van-tab>
        <van-tab title="霸王防脱">内容 4</van-tab>
    </van-tabs>
</template>

<script setup>
import { ref } from 'vue'
// 引入轮播图组件
import swiper from '@/components/swiper.vue';
// 自定义组件传参的图片
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
];
// 秒杀区域
let time = ref(5)
let status = ref(true)
// 倒计时
let timer = setInterval(() => {
    time.value--;
    if (time.value == 0) {
        clearInterval(timer)
        status.value = false
    }
}, 1000)
// 自定义导航数据
import { cartitemApi } from '@/api/api'
let cartitemData = ref([])
cartitemApi().then(res => {
    console.log('导航数据', res)
    cartitemData.value = res.data.message
})
// 自定义看楼层数据
import { floorApi } from '@/api/api'
let floorData = ref([])
floorApi().then(res => {
    console.log('楼层数据', res)
    floorData.value = res.data.message
})
</script>

<style lang="scss" scoped>
.seckill {
    width: 100%;
    height: 200px;
    background: skyblue;
}
</style>